<!--
* @FileDescription: 设备授权
* @Date: 2022年11月24日 11:58:38
* TODO:
* [] Demo
-->

<template>
	<el-container style="height:100%">
		<el-header>
			<div class="topBar">
				<el-button type="primary" @click="exportFile">导出</el-button>
				<!-- <el-upload
					class="upload-demo"
					action="https://jsonplaceholder.typicode.com/posts/"
					:http-request="importFile"
					:show-file-list="false"
				>
					<el-button type="primary">导入</el-button>
				</el-upload> -->
			</div>
		</el-header>

		<el-main>
			<el-table
				ref="deviceTable"
				class="device-table"
				:data="tableData"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="sn" label="设备标识"> </el-table-column>
				<el-table-column prop="filename" label="设备名称"> </el-table-column>
				<el-table-column prop="groupName" label="分组名称"> </el-table-column>
				<el-table-column prop="type" label="设备类型"> </el-table-column>
				<el-table-column prop="ipAddress" label="ip地址"> </el-table-column>
				<el-table-column prop="status" label="授权状态">
					<template slot-scope="scope">
						{{ scope.row.status ? '已授权' : '未授权' }}
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer>
			<el-pagination
				background
				class="pagination"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40,50,200]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination
		></el-footer>
	</el-container>
</template>

<script>
import exportMixin from '@/mixins/export.js'
import {
	getLicenseList,
	importLicense,
	exportLicense,
} from '@/api/system/serverVersion'
import { formatDate } from '@fullcalendar/vue'
export default {
	name: 'deviceAuth',
	components: {},
	// filters:{},
	mixins: [exportMixin],
	// props: {},
	data() {
		return {
			currentPage: 1,
			selectionItem: [],
			tableData: [],
			total: 0,
			pageSize: 10,
		}
	},
	created() {
		this.getLicenseList()
	},
	computed: {
		single() {
			return this.selectionItem.length !== 1
		},
	},
	methods: {
		async getLicenseList() {
			let params = { size: this.pageSize, current: this.currentPage }
			const { data, total } = await getLicenseList(params)
			this.tableData = data
			this.total = total
		},
		handleSelectionChange(selection) {
			this.selectionItem = selection
		},
		handleSizeChange(size) {
			this.pageSize = size
			this.getLicenseList()
		},
		handleCurrentChange(size) {
			this.currentPage = size
			this.getLicenseList()
		},
		// 导出
		async exportFile() {
			if (!this.selectionItem.length) {
				return this.$message({
					message: '请选择要导出的设备授权信息',
					type: 'warning',
				})
			}
			this.$confirm('是否确认导出该数据', this.$t('warning'), {
				confirmButtonText: this.$t('submitText'),
				cancelButtonText: this.$t('cancelText'),
				type: 'warning',
			})
				.then(() => {
					let ids = []
					this.selectionItem.forEach((item) => {
						ids.push(item.sn)
					})
					let sn = ids.join(',')
					return exportLicense(sn)
				})
				.then((response) => {
					this.download(response.data)
				})
				.catch(function() {})
		},
		async importFile(data) {
			let formData = new FormData()
			formData.append('file', data.file)
			await importLicense(formData)
			this.getLicenseList()
		},
	},
}
</script>
<style lang="scss" scoped>
.pagination {
	float: right;
}
.topBar {
	display: flex;
	.upload-demo {
		margin-left: 10px;
	}
}
</style>
